import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Table, Button, Popconfirm } from 'antd'
import classnames from 'classnames'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import styles from './List.less'

const List = ({ onDeleteItem, onEditItem, onResetItem, location, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const columns = [
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
      render: text => <Link to={`role/${text}`}>{text}</Link>,
    }, {
      title: '角色名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '数据等级',
      dataIndex: 'dataLevel',
      key: 'dataLevel',
      render: text => (text === '0' ? '个人' : (text === '1' ? '学院' : '全部')),
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    }, {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    }, {
      title: '操作',
      key: 'operation',
      width: 200,
      fixed: 'right',
      render: (text, record) => {
        return (<div>
          <Button type="default" onClick={() => onEditItem(record)} style={{ marginRight: '15px' }} >编辑</Button>
          <Popconfirm title="确认删除此记录？" onConfirm={() => onDeleteItem(record)} okText="确认" cancelText="取消">
            <Button type="danger">删除</Button>
          </Popconfirm>
        </div>)
      },
    },
  ]

  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}
        bordered
        scroll={{ x: 1250 }}
        columns={columns}
        simple
        rowKey={record => record.id}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onResetItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
